<template>
    <view class="love-name">
          <view class="item-view" :style="{ 'background-image': 'url(' + head + ')' }" ></view>
          <view class='item-view' :style="{ 'background-image': 'url(' +input + ')' }" ></view>
          <view class='item-view' :style="{ 'background-image': 'url(' + bottom + ')' }" ></view>
    
          <Start  v-if="defStatus === EnumStatus.STATUS" v-model:content="content" v-model:defStatus="defStatus"  />
          <Result v-else :content="content" v-model:defStatus="defStatus"  />
      </view>
  
    <Roast />
    <Recommend :top='98' v-if="defStatus === EnumStatus.RESULT"  />
    <ToDY />
  </template>
  
  <script setup lang="ts">
  import { EnumStatus } from "@/utils/constants";
  import Start from "./components/Start.vue";
  import Result from "./components/Result.vue";
  
  import Roast from "@/components/Roast/Roast.vue";
  import Recommend from "@/components/Recommend/Recommend.vue";
  import ToDY from "@/components/ToDY/ToDY.vue";

  const defStatus = ref(EnumStatus.STATUS)
  const content = ref()
  const head = computed(()=>{
      return defStatus.value === EnumStatus.STATUS ? 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230316/790c19f729d2a364d051d42b613b4e7d.png' 
      : 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230316/35ea0b5d927a83669beed81b6a7d4ac4.png'
  })
  const bottom = computed(()=>{
      return defStatus.value === EnumStatus.STATUS ? 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230316/6159486ffa5325f69d5b71f96c4b9dbf.png'
      : 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230316/09c7bf012036bed8d6a41d5b89287e8e.png'
  })
  const input = computed(()=>{
      return defStatus.value === EnumStatus.STATUS ? 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230316/285791603d4e61af83b73967691faeec.png'
      : 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230316/e3562ac535285123edc2296f1d27ec31.png'
  })
  </script>
  
  <style>
  page{
      width: 100%;
      height: 100%;
  }
  
  </style>
  
  <style lang="scss" scoped>
  .love-name{
      width: 100%;
      height: 100%;
      .item-view{
          width: 100%;
          height: 33.4%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
      }
      .yes-view{
          width: 100%;
          height: 50%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
      }
      .yet-view{
          width: 100%;
          height: 50%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
      }
  }
  
  </style>
  
